<!-- scoketIo的使用实例 -->
<template>
    <div>
        <h1>Socket.IO Component</h1>
        <p>Received messages:</p>
        <ul>
            <li v-for="(msg, index) in messages" :key="index">{{ msg }}</li>
        </ul>
        <button @click="sendMessage('Hello from Vue component!')">Send Message</button>
    </div>
</template>

<script setup>
import { ref } from 'vue';
// 在其他组件中需要推送消息只需要导入sendMessage包即可
import { connect, sendMessage, onMessage } from '../services/socketService';

const messages = ref([]);

// 在组件挂载时手动连接到Socket.IO服务器
onMounted(() => {
    connect({
        queryParams: {
            userId: '123',
            token: 'your-token',
        }
    })
})

onMessage((msg) => {
    messages.value.push(msg);
})
</script>